<template>
    <div>
        <el-card shadow="never">
            <template slot="header">
                <span>库存管理</span>
            </template>

            <!-- <Search :search-options="searchOptions" @search="handleSearch" /> -->

            <el-table v-loading="listLoading" element-loading-text="数据正在加载中" :data="list" border fit
                highlight-current-row style="width: 100%">
                <el-table-column v-for="item in columns" :key="item.prop" :label="item.label" :prop="item.prop"
                    :align="item.align" :width="item.width">
                    <template slot-scope="{ row, $index }">
                        <div v-if="item.prop === 'index'">{{ $index + 1 }}</div>
                        <div v-else-if="item.prop === 'capitalBalance'">
                            {{ formatPrice(row.capitalBalance) }}
                        </div>
                        <div v-else>{{ row[item.prop] }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="160" align="center">
                    <template slot-scope="{ row }">
                        <el-button type="primary" @click="handleDetail(row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- <Pagination :page="page" :page_size="page_size" :total="total" @sizeChange="sizeChange"
                @currentChange="pageChange" /> -->
        </el-card>
    </div>
</template>

<script>
import Search from '@/components/Search.vue'
import Pagination from '@/components/Pagination.vue'
import { inventoryList } from './api/inventory'

const COLUMNS = [
    { label: '序号', prop: 'index', align: 'center' },
    { label: '仓库名', prop: 'name', align: 'center' },
    { label: '现金余额', prop: 'capitalBalance', align: 'center' }
]

const SEARCH_OPTIONS = [
    { label: '店铺ID', key: 'id', type: 'input', placeholder: '支持精确匹配' },
    { label: '仓库名', key: 'name', type: 'input', placeholder: '支持模糊搜索' }
]

export default {
    name: 'InventoryList',
    components: { Search, Pagination },
    data() {
        return {
            listLoading: false,
            list: [],
            total: 0,
            page: 1,
            page_size: 20,
            searchOptions: SEARCH_OPTIONS,
            columns: COLUMNS,
            searchParams: {}
        }
    },
    created() {
        this.getList()
    },
    methods: {
        handleDetail(row) {

            this.$router.push({
                path: '/inventory/detail',
                query: { id: row.id }
            })
        },
        async getList() {
            this.listLoading = true
            try {
                const res = await inventoryList()

                this.list = res || []
            } finally {
                this.listLoading = false
            }
        },
        handleSearch(params) {
            this.searchParams = params
            this.page = 1
            this.getList()
        },
        pageChange(page) {
            this.page = page
            this.getList()
        },
        sizeChange(size) {
            this.page_size = size
            this.page = 1
            this.getList()
        },
        formatPrice(price) {
            if (price === null || price === undefined || price === '') return '0.00'
            const num = Number(price)
            if (!isFinite(num)) return '0.00'
            return num.toLocaleString('zh-CN', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            })
        },
    }
}
</script>

<style lang='scss' scoped></style>

